<div *ngIf="application;then showApp;else loadApp"></div>
<ng-template #showApp>
    <div id="ApplicationShow">
        <app-project-breadcrumb [project]="project" [application]="readOnlyApplication" [workflow]="workflowName"
            [workflowRun]="workflowNum" [workflowRunNode]="workflowNodeRun" [wPipeline]="workflowPipeline">
            <nz-tag class="labelFeature" [title]="'workflow_from_repository_btn' | translate"
                [nzColor]="application?.from_repository?'green':''" nz-popover nzPopoverTrigger="click"
                [nzPopoverContent]="popupFromRepository" nzPopoverPlacement="leftBottom"><i nz-icon nzType="code"
                    nzTheme="outline"></i>as code</nz-tag>
            <ng-template #popupFromRepository>
                <div class="content infoPopup">
                    <ng-container *ngIf="application && application.from_repository">
                        <p>
                            {{ 'application_from_repository' | translate: {repo: application.from_repository} }}
                        </p>
                    </ng-container>
                    <ng-container *ngIf="application && !application.from_repository">
                        <p>{{'application_repository_help_line_1' | translate}}</p>
                        <p>{{'workflow_repository_help_line_2' | translate}}</p>
                        <div class="footer">
                            <div>
                                <a class="item" target="_blank" rel="noopener noreferrer" href="#"
                                    [routerLink]="['/docs', 'tutorials', 'init_workflow_with_cdsctl']">
                                    Read more
                                </a>
                            </div>
                        </div>
                    </ng-container>
                </div>
            </ng-template>
        </app-project-breadcrumb>
        <app-tabs [tabs]="tabs" (onSelect)="selectTab($event)"></app-tabs>
        <ng-container *ngIf="editMode && !readOnly">
            <nz-button-group class="ascodeButton">
                <ng-container *ngIf="application.editModeChanged">
                    <button nz-button nzType="default" (click)="cancelApplication()">{{'common_cancel' | translate
                        }}</button>
                </ng-container>
                <button nz-button nzType="primary" [disabled]="!application.editModeChanged"
                    (click)="saveEditMode()">{{'btn_save_application' | translate }}</button>
            </nz-button-group>
        </ng-container>

        <div class="scrollingContent">
            <div class="paddingContent">
                <div class="viewContent">
                    <div [ngSwitch]="selectedTab.key">
                        <div *ngSwitchCase="'home'">
                            <app-home [project]="project" [application]="application"></app-home>
                        </div>
                        <div *ngSwitchCase="'variables'">
                            <ng-container *ngIf="!readOnly">
                                <h3>{{ 'application_variable_form_title' | translate}}</h3>
                                <app-variable-form [loading]="varFormLoading"
                                    (createVariableEvent)="variableEvent($event)"></app-variable-form>
                            </ng-container>
                            <h3>{{ 'application_variable_list_title' | translate}}</h3>
                            <app-variable [variables]="application.variables" [mode]="readOnly?'ro':'edit'"
                                (event)="variableEvent($event)" auditContext="application" [project]="project"
                                [applicationName]="readOnlyApplication.name"></app-variable>
                        </div>
                        <div *ngSwitchCase="'vuln'">
                            <app-vulnerabilities [edit]="project.permissions.writable"></app-vulnerabilities>
                        </div>

                        <div *ngSwitchCase="'usage'">
                            <ng-container *ngIf="usageCount > 0">
                                <app-usage [project]="project" [workflows]="workflows" [pipelines]="pipelines"
                                    [environments]="environments"></app-usage>
                            </ng-container>
                            <ng-container *ngIf="usageCount === 0">
                                <nz-alert nzType="info" nzMessage="The application is not used"></nz-alert>
                            </ng-container>
                        </div>
                        <div *ngSwitchCase="'keys'">
                            <app-application-keys [project]="project" [application]="application" [editMode]="editMode"
                                [readOnly]="readOnly">
                            </app-application-keys>
                        </div>
                        <div *ngSwitchCase="'advanced'">
                            <app-application-admin [application]="application" [project]="project"
                                [editMode]="editMode">
                            </app-application-admin>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-template>
<ng-template #loadApp>
    <nz-spin nzTip="Loading application..."></nz-spin>
</ng-template>
